<template>
    <div class="sendmsg">
        <van-nav-bar title="获取验证码" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="content">
            <van-field v-model="code" name="验证码" placeholder="验证码">
                <template #button>
                    <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" @click="sendMsg" size="small">
                        发送验证码
                    </van-button>
                </template>
            </van-field>
            <div style="margin: 16px;">
                <van-button round block type="primary" :disabled="!flag" class="custom_btn" @click="checkCode">
                    提交
                </van-button>
            </div>
         </div>
    </div>
</template>

<script>
import { doSendmsg,doYanzheng } from '@/api/user';
    export default {
        data(){
            return{
                tel:'',
                code:''
            }
        },
        created(){
            this.tel=localStorage.getItem('tel')
        },
        computed:{
            flag(){
               return /^\d{5}$/.test(this.code)
            }
        },
        methods:{
            onClickLeft(){
                history.back()
            },
            sendMsg(){
                doSendmsg({tel:this.tel}).then(res=>this.code=res.data.data)
            },
            checkCode(){
                doYanzheng({tel:this.tel,code:this.code}).then(res=>{
                    if (res.data.code!=200) {
                        return showToast('验证码错误')
                    }
                    this.$router.push('/user/setpass')
                })
            }
        }
    }
</script>

<style lang="less" scoped>

</style>